<template>
	<div style="width: 100%">
		<div style="display: flex">
			<template v-for="(item, i) in FieldItem?.attrs.infoList" :key="'ict' + i">
				<div :style="{ flex: 1 / FieldItem?.attrs.infoList.length }" class="box">
					<p class="title">{{ item.title }}</p>
					<div class="content">
						<div class="content_box" v-for="(c, ci) in item.content" :key="'ct' + ci" :style="{ width: 100 / item.lineNumber + '%' }">
							<div class="content_text">
								<p>{{ c.label }}</p>
								<p :style="{ color: color[ci] }">{{ c.value }}</p>
							</div>
							<div
								class="content_icon"
								:style="{
									background: background[ci],
									padding: Number(c.padding) + 'px',
								}"
							>
								<el-icon :style="{ color: color[ci], 'font-size': c.size + 'px' }"><component :is="iconMap[c.icon]" /></el-icon>
							</div>
						</div>
					</div>
				</div>
				<template v-if="FieldItem?.attrs.infoList.length > 1 && i < FieldItem?.attrs.infoList.length - 1">
					<div class="divider" :key="'ictder' + i">
						<el-divider direction="vertical" class="infoCountDivider"></el-divider>
					</div>
				</template>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import iconMap from '/@/utils/iconMap';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem } = toRefs(props);

const color = reactive<Record<number, string>>({
	0: '#409EFF',
	1: '#67C23A',
	2: '#E6A23C',
	3: '#F56C6C',
});

const background = reactive<Record<number, string>>({
	0: '#ecf5ff',
	1: '#f0f9eb',
	2: '#fdf6ec',
	3: '#fef0f0',
});
onMounted(() => {
	init();
});

const init = () => {
	if (FieldItem.value?.attrs.infoList.length) {
		FieldItem.value?.attrs.infoList.forEach((item: Record<string, any>) => {
			item.content.forEach((list: Record<string, any>) => {
				list.value = calcFieldValue(4, list.value, props.inputData, props.pageData, props.globalData);
			});
		});
	}
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.box {
	.title {
		margin-bottom: 15px;
	}
	.content {
		padding-left: 5px;
		.content_box {
			float: left;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.content_text {
				width: 80%;
				padding-left: 20px;
			}
			.content_icon {
				border-radius: 50%;
				line-height: 0px;
			}
		}
		&::after {
			content: '';
			display: block;
			clear: both;
		}
	}
}
.divider {
	flex: 0.1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.infoCountDivider {
	height: 80% !important;
	background: #bebebe !important;
}
</style>
